<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>账户项目后台管理系统</title>
    <meta name="keywords" content="账户项目后台管理系统">
    <meta name="description" content="账户项目后台管理系统">
    <link rel="shortcut icon" href="/favicon.ico">

    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link href="/css/font-awesome.min.css" rel="stylesheet">
    <link href="/css/animate.min.css" rel="stylesheet">
    <link href="/css/style.min.css" rel="stylesheet">

    <link href="/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
    <script>if(window.top !== window.self){ window.top.location = window.location;}</script>

    <style type="text/css">
        .help-block{text-align: left;}
        .code-box{position: relative;}
        .code-box .btn-w-m{position: absolute;right: 0;top:0;}
    </style>

</head>
<body class="gray-bg">

    <div class="middle-box text-center loginscreen  animated fadeInDown">
        <div>
            <div>
                <h1 class="logo-name"><img src="/img/logo.png" /></h1>
            </div>
            <h2>账户项目</h2>
            <h3>忘记密码</h3>
            <form class="m-t sendcode" id="signupForm">

                <div class="form-group code-box">
                    <div class="form-group">
                        <input id="mobile" name="mobile" class="form-control" type="text" aria-required="true" aria-invalid="true" class="error" placeholder=" 手机号">
                    </div>
                    <button id="sendNote" class="btn btn-primary btn-w-m send-node" type="button">发送验证码</button>
                </div>

                <div class="form-group">
                    <input id="code_num" name="code_num" class="form-control" type="text" placeholder=" 验证码">
                </div>

                <div class="form-group">
                    <input id="password" name="password" class="form-control" type="password" placeholder=" 新密码">
                </div>

                <div class="form-group">
                    <input id="passwords" name="passwords" class="form-control" type="password" placeholder=" 确认密码">
                </div>

                <button type="submit" class="btn btn-primary block full-width m-b">修改密码</button>
            </form>
        </div>
    </div>

    <!-- 全局js -->
    <script src="/js/jquery.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script src="/js/plugins/sweetalert/sweetalert.min.js"></script>

    <!-- jQuery Validation plugin javascript-->
    <script src="/js/plugins/validate/jquery.validate.min.js"></script>
    <script src="/js/plugins/validate/messages_zh.min.js"></script>
    <script src="/js/validate.js"></script>
    <!--表单验证
    <script src="js/demo/form-validate-demo.min.js"></script>-->

<script type="text/javascript">

$.validator.setDefaults({
    highlight: function (element) {
        $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
    },
    success: function (element) {
        element.closest('.form-group').removeClass('has-error').addClass('has-success');
    },
    errorElement: "span",
    errorPlacement: function (error, element) {
        if (element.is(":radio") || element.is(":checkbox")) {
            error.appendTo(element.parent().parent().parent());
        } else {
            error.appendTo(element.parent());
        }
    },
    errorClass: "help-block m-b-none",
    validClass: "help-block m-b-none"
});

$().ready(function () {

    // validate signup form on keyup and submit
    var icon = "<i class='fa fa-times-circle'></i> ";
    $("#signupForm").validate({
        rules: {
            mobile: {
                required: true,
                isMobile: true,
            },
            code_num: "required",
            password: {
                required: true,
                rangelength:[6,14],
            },
            passwords: {
                required: true,
                rangelength:[6,14],
                equalTo: "#password"
            },
        },
        messages: {
            mobile: {
                required: icon + "请输入手机号",
            },
            code_num: icon + "请输入验证码",
            password: {
                required: icon + "请输入新密码",
                minlength: icon + "密码长度6到14之间的数字和英文"
            },
            passwords: {
                required: icon + "请再次输入新密码",
                minlength: icon + "密码长度6到14之间的数字和英文",
                equalTo: icon + "两次密码输入不一致"
            },
        },
        submitHandler:function(){
            $.ajax({
                type        :    'post',
                url         :    "forget-pass",
                dataType    :    'json',
                async       :    false,
                cache       :    false,
                processData :    false,  // 告诉jQuery不要去处理发送的数据
                contentType :    false,  // 告诉jQuery不要去设置Content-Type请求头
                data        :    new FormData($(".sendcode")[0]),
                success     :    function(msg){
                    if (msg.code!= 20000) {
                        alert(msg.message);
                    }else{
                        alert(msg.message);
                        window.location.href='login';
                    }
                }
            });
        }
    });


});


$("#sendNote").on("click",function () {
    var mobile = $("#mobile").val();
    if(!mobile){
        swal({confirmButtonText: "关闭", confirmButtonColor:"#1ab394",title: "请先填写手机号", type: "warning"});
        return false;
    }
    $(this).attr("onclick","");
    //ajax请求，发送验证码
    $.ajax({
        url: 'send-note',
        type: 'post',
        dataType: 'json',
        data: {'mobile': mobile},
        success: function (res) {
            if (res.code == 20000) {
                count_down(180);
            } else {
                swal({confirmButtonText: "关闭", confirmButtonColor:"#1ab394",title: res.message, type: "warning"});
            }
        },
        error: function () {
            swal({confirmButtonText: "关闭", confirmButtonColor:"#1ab394",title: "网络错误", type: "warning"});
        }

    });


});
//60秒计时
function count_down(s){
    s=s-1;
    $('#sendNote').html(s+"s后重新发送");
    if(s>0){
        setTimeout("count_down("+s+")",1000);
    }else{
        $("#sendNote").html("重新发送");
        $("#sendNote").attr("onclick","sendnote()");
    }
}



</script>



</body>
</html>
